<template>
	<view class="center-container">
		<CommonBack title="个人中心" @back="back"></CommonBack>
		<!-- 设置头像 -->
		<view class="set-avatar c-theme-btn-b">
			<image src="../../static/imgs/upload.png" mode=""></image>
			<text>设置头像</text>
		</view>
		<!-- 个人信息 -->
		<view class="user-info">
			<u--input disabled style="margin-bottom: 30rpx;" shape="circle" placeholder="ZhangRuoqi"
				v-model="userInfo.username" suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle"></u--input>
			<u--input style="margin-bottom: 30rpx;" shape="circle" placeholder="请输入您的手机号" v-model="userInfo.mobile"
				suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle"></u--input>
			<u--input style="margin-bottom: 30rpx;" shape="circle" placeholder="请输入您的性别" v-model="userInfo.sex"
				suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle"></u--input>
			<u--input style="margin-bottom: 30rpx;" shape="circle" placeholder="请输入您的个人简介" v-model="userInfo.intro"
				suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle"></u--input>
			<view class="notice">*个人简介最多可以输入20个字哦~</view>
		</view>
		<view class="btn" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		myInfo,
		editInfo
	} from "@/api/my.js"
	import CommonBack from "../../components/CommonBack.vue"
	import {
		TOAST
	} from "@/utils/utils.js"
	export default {
		components: {
			CommonBack
		},
		data() {
			return {
				name: "",
				suffixIconStyle: {
					color: "#3F7BED"
				},
				userInfo: {}
			};
		},
		methods: {
			// 表单验证
			formValidate() {
				if (!this.userInfo.mobile) {
					TOAST('请输入手机号码')
					return false
				}
				if (!this.userInfo.sex) {
					TOAST('请输入性别(男、女)')
					return false
				}
				if (!this.userInfo.intro || this.userInfo.intro.length > 20) {
					TOAST('请输入简介')
					return false
				}
				return true
			},
			back() {
				uni.switchTab({
					url: "./my"
				})
			},
			getMyInfo() {
				myInfo(this.userId).then(res => {
					this.userInfo = res.data
					this.userInfo.sex = this.userInfo === 0 ? '女' : '男'
				})
			},
			// 保存用户信息
			submit() {
				const valid = this.formValidate()
				if(valid){
					editInfo({
						address: "",
						intro: this.userInfo.intro,
						mobile: this.userInfo.mobile,
						sex: this.userInfo.sex === '女' ? 0 : 1
					}, this.userId).then(res => {
						if(res.code===200){
							TOAST("修改成功")
						}
						this.getMyInfo()
					})
				}
				
			}
		},
		computed: {
			userId() {
				return uni.getStorageSync("userInfo").id
			}
		},
		mounted() {
			this.getMyInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.center-container {
		padding: 100rpx 60rpx;

		.set-avatar {
			margin: 80rpx auto;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			box-shadow: -1rpx -10rpx 20rpx 2rpx rgba(255, 255, 255, 0.6), inset 10rpx 10rpx 10rpx 2rpx rgba(61, 84, 100, 0.10196078431372549);
			background: #F4F6F8;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-size: 20rpx;
				color: #999FAD;
			}
		}

		.user-info {
			.notice {
				color: #999FAD;
				font-size: 28rpx;
			}
		}

		.btn {
			height: 100rpx;
			box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
			background: #F4F6F8;
			border: 1px solid #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			line-height: 100rpx;
			text-align: center;
			color: #999FAD;
			margin-top: 80rpx;
		}
	}
</style>
